import React from "preact/compat";
import {Exam, ExamProps} from "./exam/exam.tsx";
import {useEffect, useState} from "react";
import {NewExam} from "./exam/new.tsx";

const ExamContainerStyle: React.JSX.CSSProperties = {
    marginTop: "10%",
    marginLeft: "10%",
    height: "800px",
    width: "80%",
}

const App: React.FC = () => {
    const [exams, setExams] = useState<ExamProps[]>([]);
    const [id, setId] = useState<number>(0);
    const [newExam, setNewExam] = useState<boolean>(false);

    const nextExam = () => {
        if (id === 0) {
            alert("已经是第一道题了")
        }
        setId(id > 0 ? id - 1 : 0)
    }
    const prevExam = () => {
        if (id === exams.length - 1) {
            alert("已经是最后一道题了")
        }
        setId(id < exams.length - 1 ? id + 1 : exams.length - 1)
    }
    const deleteExam = async () => {
        if (!location.href.includes("?")) {
            console.log("取消删除任务，未配置pw参数")
            return;
        }
        const id = prompt("输入题目ID")
        const resp = await fetch(`/api/exams/${id}?pw=${location.href.split('?')[1]}`, {method: "DELETE"})
        const data = await resp.json()
        if (data.error) {
            alert(data.error)
        } else {
            alert(data.status)
        }

    }
    useEffect(() => {
        const fetchData = async () => {
            const resp = await fetch("/api/exams");
            const json = await resp.json();
            // const json = {
            //     "exams": [
            //         {
            //             "id": 1,
            //             "question": "1+1=",
            //             "answer": "2"
            //         },
            //         {
            //             "id":2,
            //             "question": "2+2=",
            //             "answer": "4"
            //         },
            //         {
            //             "id": 3,
            //             "question": "3+3=",
            //             "answer": "6"
            //         }
            //     ]
            // }
            setExams(json.exams ?? []);
        }
        fetchData();
    }, []);
    return <>
        {exams.length > 0 ? <div style={ExamContainerStyle}>
            <h1 style={{
                display: 'flex',
                justifyContent: 'center',
                paddingBottom: '5%'
            }}>进度：{id + 1}/{exams.length}</h1>
            <Exam key={id}  {...exams[id]}/>
            <div
                style={{display: 'flex', position: 'fixed', bottom: '5%', left: 0, right: 0, justifyContent: 'center'}}>
                <button style={{width: '100px', height: '100px'}} onClick={nextExam}>上一题</button>
                <button style={{width: '100px', height: '100px'}} onClick={prevExam}>下一题</button>
            </div>
        </div> : <>
            <h1 style={ExamContainerStyle}><span>暂无可用题库</span></h1>
        </>
        }
            <button onClick={() => setNewExam(!newExam)}>添加题目</button>
            <div style={{display: newExam ? 'flex' : 'none'}}><NewExam cancel={() => setNewExam(false)}/></div>
            <button onClick={deleteExam}>删除题目</button>
    </>;
}
export {App};